<template>
	<div class="flex flex-nowrap">
		<div class="flex-1 flex flex-col justify-between p-2 border-l-[1px] border-[#1cf3d6] border-dashed">
			<div class="flex items-center justify-around flex-nowrap" v-for="item in list1" :key="item.label">
				<div class="button_bg">{{ item.label }}</div>
				<div class="flex-1 text-center label_text">{{ item.val }}</div>
				<div class="flex-1 text-center">{{ item.unit }}</div>
			</div>
		</div>
		<div class="flex-1 flex flex-col justify-between border-l-[1px] border-r-[1px] border-[#1cf3d6] border-dashed p-2">
			<div class="flex items-center justify-around flex-nowrap" v-for="item in list2" :key="item.label">
				<div class="button_bg">{{ item.label }}</div>
				<div class="flex-1 text-center label_text whitespace-nowrap" :class="{ '!text-sm': !item.unit }">{{ item.val }}</div>
				<div class="flex-1 text-center whitespace-nowrap">{{ item.unit }}</div>
			</div>
		</div>
		<div class="flex-1 flex flex-col justify-between p-2 border-r-[1px] border-[#1cf3d6] border-dashed">
			<div class="flex items-center justify-around flex-nowrap" v-for="item in list3" :key="item.label">
				<div class="button_bg">{{ item.label }}</div>
				<div class="flex-1 text-center label_text">{{ item.val }}</div>
				<div class="flex-1 text-center">{{ item.unit }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
const list1 = [
	{
		label: 'PM2.5',
		val: 8,
		unit: 'μg/m³',
	},
	{
		label: 'NO₂',
		val: 18,
		unit: 'μg/m³',
	},
	{
		label: 'VOC',
		val: 0,
		unit: 'ppm',
	},
	{
		label: '风速',
		val: 0.8,
		unit: 'm/s',
	},
];
const list2 = [
	{
		label: 'PM10',
		val: 8,
		unit: 'μg/m³',
	},
	{
		label: 'CO',
		val: 18,
		unit: 'mg/m³',
	},
	{
		label: '温度',
		val: 0,
		unit: '℃',
	},
	{
		label: '风向',
		val: '正北',
		unit: '',
	},
];
const list3 = [
	{
		label: 'SO₂',
		val: 4,
		unit: 'μg/m³',
	},
	{
		label: 'O₃',
		val: 130,
		unit: 'μg/m³',
	},
	{
		label: '湿度',
		val: 70.4,
		unit: '%RH',
	},
	{
		label: '气压',
		val: 944.5,
		unit: 'KPa',
	},
];
</script>

<style lang="scss" scoped>
@font-face {
	font-family: ds_digital;
	src: url('/assets/fonts/ds_digital.woff');
}
.button_bg {
	font-size: 12px;
	min-width: 80px;
	width: 80px;
	text-align: center;
	padding: 0 8px;
	line-height: 30px;
	background-image: url('/@/assets/images/factor.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.label_text {
	font-family: ds_digital;
	font-size: 24px;
	line-height: 24px;
	text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
}
</style>
